<%--
  Created by IntelliJ IDEA.
  User: qianghj
  Date: 2019/9/11
  Time: 14:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>


    <form  method="post">
        <span class="tip" style="font-size: 10px;color: red"></span><br>
        手机号码：<input type="text" name="telno" class="telno" placeholder="请输入手机号"/><br/>
        <input type="text" name="code" class="code" placeholder="请输入验证码"/><br/>
        <input type="button"  onclick="getCode()" value="获得手机验证码"/>
        密码：<input type="password" name="password" class="password" placeholder="请输入密码"/><br/>
        <input type="button" onclick="regist()" value="注册"/>
    </form>

    <SCRIPT>
        var xhr;
        function getCode() {
            var telno = document.querySelector(".telno").value;
            console.log("telno:"+telno);

            //1.创建XMLHttpRequest
            if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            //表单的一部请求
            if(xhr != null){
                //2.连接服务器
                xhr.open("POST","member/checkTelno",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.onreadystatechange = callfun;
                xhr.send("telno="+ telno);
            }else{
                alert("不能创建XMLHttpRequest");
            }
        }
        function  callfun() {
            if (xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);
                if (xhr.responseText == 0){ //手机号不可用
                    document.querySelector(".tip").innerHTML = "手机号不可用";

                }else{
                    code = xhr.responseText;
                    document.querySelector(".tip").innerHTML = "手机号可用";
                }
            }
        }
        function regist() {
            //1.获得页面输入的验证码
            var inputCode = document.querySelector(".code").value;
            //2.与code比较
            if (code == inputCode){
                //3.相等--------->servlet----->注册功能
                window.location.href="member/regist";
                console.log("执行servlet注册")
            }else{
                //4.不相等------>提示验证有误
                document.querySelector(".tip").innerHTML="验证码有误,请重新输入";
            }
        }
    </SCRIPT>


</body>
</html>
